<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" >
  </head>
  <body>
    <div>
      <input id="width" type="text" class="input" placeholder="请输入宽度" value="">
      <input id="heigth" type="number" class="input" placeholder="请输入高度" value="">
      <input id="length" type="number" class="input" value="">
      <button type="button" id="button" class="button2">计算</button>


      <p>含税金额：10000</p>
      <p>税率：10%</p>
      <p>不含税金额：9090.90909090909</p>
      <p>税金额：909.090909090909</p>
    </div>

    <script type="text/javascript">
      let btn1 = document.getElementById("button")
      let btn2 = document.querySelector("#button")
      let btn3 = document.querySelector(".button2")
      let btn4 = document.getElementsByClassName("input")
      let btn5 = document.getElementsByClassName("button2")

      console.log(btn1);
      console.log(btn2);
      console.log(btn3);
      console.log(btn4);
      console.log(btn5);

      btn1.onclick = function(){

        let width = document.getElementById("width").value
        let heigth = document.getElementById("heigth").value
        let length = document.getElementById("length").value
        let volume = width * heigth * length

        console.log(`长度：${length}`)
        console.log(`宽度：${width}`)
        console.log(`高度：${heigth}`)
        alert(volume)

        console.log("onclick")
      }

      btn1.addEventListener('click', function(){
        console.log("addEventListener")
      })

      if (true) {
        console.log("if语句有大括号");
      }

      if (true) console.log("if语句没有大括号");

      // switch (key) {
      //   case "1":
          
      //     break;
      // }

      let array = [1, 2, 3, 4, 5, 6]
      for (let index = 0; index < array.length; index++) {
        if(index === 3){
          // 跳出循环
          continue;
        }

        if(index > 3){
          // 终止循环
          break
        }
        console.log(`普通for循环遍历输出：${array[index]}`);
      }
      
      // continue break无效
      array.forEach((item, index) => {
        console.log(`forEach循环遍历：下标:${index},对象:${item}`);
      })
      
      let student = {
        name: "张三",
        age: 18,
        heigth: 180
      }

      for (const key in student) {
        console.log(`for-in遍历输出学生属性：${key}:${student[key]}`);
      }
      console.log(`输出对象属性name：${student.name}`);
      console.log(`输出对象属性age：${student.age}`);
      console.log(`输出对象属性heigth：${student.heigth}`);

      let whileNum = 0
      while (whileNum < 10) {
        console.log(`while循环：${whileNum}`);
        whileNum ++
      }

      let doWhileNum = 0
      do {
        doWhileNum ++
        console.log(`doWhile循环：${doWhileNum}`);
      } while (doWhileNum < 10 && doWhileNum > 1);

      // 判断数据类型三种方法
      typeof 100
      let a = 100; a instanceof Number
      let b = 100; Object.prototype.toString.call(b)

      let apple, orange, li;
      li = (500 - 20) / 4;
      apple = 2 * li
      orange = li + 20
      console.log(apple, orange, li);
    </script>
  </body>
</html>